<!--
  @Descripttion:招聘统计页面
  @Author：yejianbo
  @Date：2022年05月08日 22:50:42
-->
<template>
  <div style="margin-top:14px;">
    <el-card shadow="always" style="margin-bottom: 14px;">
      <p class="ansy-title">学生状况</p>
      <el-row type="flex" class="row-bg" justify="space-between">
        <div>
          <el-date-picker
            v-model="dateValue"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            style="margin-right:10px;"
            @change="dateChange"
          />
          <el-button
            type="primary"
            plain
            size="mini"
            style="margin-right:10px;"
            @click="viewByTime('week')"
          >只看本周</el-button>
          <el-button
            type="primary"
            plain
            size="mini"
            style="margin-right:10px;"
            @click="viewByTime('month')"
          >只看本月</el-button>
          <el-button
            type="primary"
            plain
            size="mini"
            style="margin-right:10px;"
            @click="init"
          >查询</el-button>
          <el-button
            plain
            size="mini"
            style="margin-right:10px;"
            @click="reset"
          >重置</el-button>
        </div>
      </el-row>
      <el-row :gutter="32" style="padding-top: 20px;margin-bottom: 14px;">
        <el-col :span="3">
          <div class="item-title">
            注册学生数
            <el-tooltip
              class="item"
              effect="dark"
              content="所选时间内，多少学生进行平台注册"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ studentDataCount.registerStudentNum }}</div>
        </el-col>
        <el-col :span="3">
          <div class="item-title">
            活跃学生数
            <el-tooltip
              class="item"
              effect="dark"
              content="所选时间内，多少学生进行平台注册后，至少登录一次"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ studentDataCount.hotStudentNum }}</div>
        </el-col>
        <el-col :span="3">
          <div class="item-title">
            投递学生数
            <el-tooltip
              class="item"
              effect="dark"
              content="所选时间内，多少学生进行平台注册后，至少投递一次简历"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ studentDataCount.sendStudentNum }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-card
            shadow="always"
          >
            <p class="ansy-title no-margin">应聘学生分布</p>
            <pie-chart ref="studenPie" />
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {
  getStudentInfoCount
} from '@/api/company-admin-api/hireManage/index.js'
import {
  getDistribution
} from '@/api/school-admin-api/platform/index.js'
import moment from 'moment'
import PieChart from '../PieChart'

export default {
  name: 'CompanyInfo',
  components: {
    PieChart
  },
  data() {
    return {
      studentDataCount: {
        registerStudentNum: 0,
        sendStudentNum: 0,
        hotStudentNum: 0
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近90天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      dateValue: null,
      activiteCompanyRank: [],
      // 职位应聘成功率排名
      hireJobRank: [],
      // 招聘职位查询参数
      queryParams: {
        startDate: '',
        endDate: '',
        type: 0 // 查询类型,0:默认(不传时间),1:时间间隔,2:本周,3:本月
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 快捷查看本周、本月
    viewByTime(type) {
      let startDate, endDate
      if (type === 'week') {
        startDate = moment().startOf('week').add(1, 'day').format('YYYY-MM-DD')
        endDate = moment().format('YYYY-MM-DD')
        this.queryParams.startDate = startDate
        this.queryParams.endDate = endDate
        this.queryParams.type = 2
      } else {
        startDate = moment().startOf('month').format('yyyy-MM-DD')
        endDate = moment().format('yyyy-MM-DD')
        this.queryParams.startDate = startDate
        this.queryParams.endDate = endDate
        this.queryParams.type = 3
      }
      this.$set(this, 'dateValue', [startDate, endDate])
    },
    dateChange(data) {
      if (Array.isArray(data) && data.length === 2) {
        this.queryParams.startDate = data[0]
        this.queryParams.endDate = data[1]
        this.queryParams.type = 1
      } else {
        this.queryParams.startDate = ''
        this.queryParams.endDate = ''
        this.queryParams.type = 0
      }
    },
    reset() {
      this.queryParams = this.$options.data().queryParams
      this.dateValue = null
      this.init()
    },
    init() {
      this.getStudentInfoCount()
      this.getDistribution()
    },
    // 职位、学生分布情况
    getDistribution() {
      const params = Object.assign({}, this.queryParams)
      for (const key in params) {
        if (params[key] === '' || params[key] === null) {
          delete params[key]
        }
      }
      if (params.startDate && params.endDate) {
        params.startDate += ' 00:00:00'
        params.endDate += ' 23:59:59'
      }
      getDistribution(params).then((res) => {
        if (res.code === 0 && res.data) {
          const studentDistribution = res?.data?.studentDistribution.map(
            (item) => {
              try {
                const city = JSON.parse(item.city) || []
                if (Array.isArray(city)) {
                  item.city = city[city.length - 1]
                }
                return item
              } catch (error) {
                item.city = '--'
                return item
              }
            }
          )
          this.$refs.studenPie &&
              this.$refs.studenPie.initChart(studentDistribution)
        }
      })
    },
    // 学生情况统计
    getStudentInfoCount() {
      const params = Object.assign({}, this.queryParams)
      for (const key in params) {
        if (params[key] === '' || params[key] === null) {
          delete params[key]
        }
      }
      if (params.startDate && params.endDate) {
        params.startDate += ' 00:00:00'
        params.endDate += ' 23:59:59'
      }
      if (params.type === 0) {
        delete params.startDate
        delete params.endDate
      }
      getStudentInfoCount(params).then((res) => {
        if (res.code === 0 && res.data) {
          this.studentDataCount.registerStudentNum = res.data.registerStudentNum || 0
          this.studentDataCount.sendStudentNum = res.data.sendStudentNum || 0
          this.studentDataCount.hotStudentNum = res.data.hotStudentNum || 0
        }
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  @import "@/assets/styles/vars.scss";
  .blue06 {
    color: $blue06;
  }
  .ansy-title {
    @include t14h22;
    font-weight: 600;
  }
  .m14 {
    margin-bottom: 14px;
  }
  .no-margin {
    margin: 0;
  }
  .item-title {
    @include t12h20;
  }
  .count-num {
    font-size: 22px;
    color: $blue06;
    line-height: 30px;
    span {
      color: #000;
      @include t12h20;
    }
  }
  .count-data {
    font-size: 12px;
    margin: 0;
    color: $blue06;
    font-weight: 600;
  }
  .greed {
    color: $green04;
  }
  .dashboard-editor-container {
    padding: 14px;
    background-color: rgb(240, 242, 245);
    position: relative;
    height: 100%;
    .chart-wrapper {
      background: #fff;
      padding: 14px 14px 0;
      margin-bottom: 14px;
    }
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  </style>

